Action.widget = {};
Action.widget.Selector = function(config){
    this.config = $.extend({
        width : 100,
        height : 100,
        x : 350,
        y : 200
    },config);
    this.jqDom = null;
    this.contentDom = null;
    this.nwHandler = null;
    this.neHandler = null;
    this.seHandler = null;
    this.swHandler = null;
    this.rotateHandler = null;
    this.fix = 6;
    this.left = 350;
    this.top = 200;
    this.width = 100;
    this.height = 100;
	this.build();
};

Action.widget.Selector.prototype = {
	build : function(){
		var html = 
			'<div class = "x-selector">' + 
				'<div class="x-content"></div>' + 
				'<div class="x-handler"></div>' +
				'<div class="x-handler"></div>' +
				'<div class="x-handler"></div>' +
				'<div class="x-handler"></div>' +
			'</div>';
		var sel = this.jqDom = $(html).appendTo("#canvasBox");
        this.contentDom = $("div:nth-of-type(1)",sel)[0];
        this.nwHandler = $("div:nth-of-type(2)",sel)[0];
        this.neHandler = $("div:nth-of-type(3)",sel)[0];
        this.seHandler = $("div:nth-of-type(4)",sel)[0];
        this.swHandler = $("div:nth-of-type(5)",sel)[0];

        var cfg = this.config,
            fix = this.fix;
        $.extend(this,{
            left : cfg.x,
            top : cfg.y,
            width : cfg.width,
            height : cfg.height
        });
        $.extend(this.contentDom.style,{
            left : cfg.x+"px",
            top : cfg.y+"px",
            width : cfg.width+"px",
            height : cfg.height+"px"
        });

        $.extend(this.nwHandler.style,{
            left : (cfg.x-fix)+"px",
            top : (cfg.y-fix)+"px"
        });
        $.extend(this.neHandler.style,{
            left : (cfg.x+cfg.width-fix)+"px",
            top : (cfg.y-fix)+"px"
        });
        $.extend(this.seHandler.style,{
            left : (cfg.x+cfg.width-fix)+"px",
            top : (cfg.y+cfg.height-fix)+"px"
        });
        $.extend(this.swHandler.style,{
            left : (cfg.x-fix)+"px",
            top : (cfg.y+cfg.height-fix)+"px"
        });

        
        var that  = this;
        $(this.contentDom).draggable({ 
            containment: '#canvasBox',
            drag : function(e,u){that._moveContent(e,u);}
        });
        $(this.nwHandler).draggable({ 
            containment: '#canvasBox',
            drag : function(e,u){that._nwResize(e,u)}
        });
        $(this.neHandler).draggable({ 
            containment: '#canvasBox',
            drag : function(e,u){that._neResize(e,u)}
        });
        $(this.seHandler).draggable({ 
            containment: '#canvasBox',
            drag : function(e,u){that._seResize(e,u)}
        });
        $(this.swHandler).draggable({ 
            containment: '#canvasBox',
            drag : function(e,u){that._swResize(e,u)}
        });

        if(this.config.customRender && typeof this.config.customRender == 'function')
            this.config.customRender.apply(this);
	},
    
    _rotate : function(e,ui){
        event.stopPropagation();

    },
    _nwResize : function(event,ui){
        event.stopPropagation();
        var fix = this.fix;
        var newPos = ui.position,
            x = newPos.left + fix,
            y = newPos.top + fix,
            dx = x - this.left,
            dy = y - this.top,
            w = this.width - dx,
            h = this.height - dy;
        if(w>20 && h>20){
            $.extend(this,{
                left : x,
                top : y,
                width : w,
                height : h
            });
            
            this.contentDom.style.left = x+"px";
            this.contentDom.style.top = y+"px"; 
            this.contentDom.style.width = w+'px';
            this.contentDom.style.height = h+'px';

            this.neHandler.style.top =  newPos.top+"px";
            this.swHandler.style.left =  newPos.left+"px";
        }

        if(this.config.afterResize && typeof this.config.afterResize == 'function')
            this.config.afterResize.apply(this);
    },
    _neResize : function(event,ui){
        event.stopPropagation();
        var fix = this.fix;
        var newPos = ui.position,
            x = newPos.left + fix,
            y = newPos.top + fix,
            dy = y - this.top,
            w = x - this.left,
            h = this.height - dy;
        if(w>20 && h>20){
            $.extend(this,{
                top : y,
                width : w,
                height : h
            });
            this.contentDom.style.top = y+"px"; 
            this.contentDom.style.width = w+'px';
            this.contentDom.style.height = h+'px';

            this.nwHandler.style.top =  newPos.top+"px";
            this.seHandler.style.left =  newPos.left+"px";
        }
        if(this.config.afterResize && typeof this.config.afterResize == 'function')
            this.config.afterResize.apply(this);
    },
    _seResize : function(event,ui){
        event.stopPropagation();
        var fix = this.fix;
        var newPos = ui.position,
            w = newPos.left + fix - this.left,
            h = newPos.top + fix - this.top;
        if(w>20 && h>20){
            $.extend(this,{
                width : w,
                height : h
            });
            this.contentDom.style.width = w+'px';
            this.contentDom.style.height = h+'px';

            this.neHandler.style.left =  newPos.left+"px";
            this.swHandler.style.top =  newPos.top+"px";
        }
        if(this.config.afterResize && typeof this.config.afterResize == 'function')
            this.config.afterResize.apply(this);
    },
    _swResize : function(event,ui){
        event.stopPropagation();
        var fix = this.fix;
        var newPos = ui.position,
            x = newPos.left + fix,
            y = newPos.top + fix,
            dx = x - this.left,
            w = this.width - dx;
            h = y-this.top;
        if(w>20 && h>20){
            $.extend(this,{
                left : x,
                width : w,
                height : h
            });
            this.contentDom.style.left = x+"px";
            this.contentDom.style.width = w+'px';
            this.contentDom.style.height = h+'px';

            this.nwHandler.style.left =  newPos.left+"px";
            this.seHandler.style.top =  newPos.top+"px";
        }
        if(this.config.afterResize && typeof this.config.afterResize == 'function')
            this.config.afterResize.apply(this);
    },
    _moveContent : function(event,ui){
        var x = ui.position.left,
            y = ui.position.top,
            fix = this.fix;
        this.left = x;
        this.top = y;

        this.nwHandler.style.left = (x - fix)+"px";
        this.nwHandler.style.top = (y - fix)+"px";
        this.neHandler.style.left = (x + this.width - fix)+"px";
        this.neHandler.style.top = (y - fix)+"px";
        this.seHandler.style.left = (x + this.width - fix)+"px";
        this.seHandler.style.top = (y + this.height - fix)+"px";
        this.swHandler.style.left = (x - fix)+"px";
        this.swHandler.style.top = (y + this.height - fix)+"px";
    }
};